<template>
	<view class="container">
		<view>
			<view class="item-title">
				车辆检车
			</view>
			<!-- <u-button @click="test">触发</u-button> -->
			<view class="img-box">
				<pointImg 
					v-for="(item,index) in frontList" 
					:key="index"
					:width="item.width"
					:unActiveImg="item.unActiveImg"
					:activeImag="item.activeImag"
					:ponitArr="item.pointList"
					:beginIndex="beginIndex"
					:indexPic="index"
					@getPointArr="getPoint($event,item)" 
					@deletePoint="deletePoint($event)"
					/>			
			</view>
		</view>
		<view>
			<view class="item-title">
				检查点信息
			</view>
			<view >
				<checkDamage v-for="(item,index) in totalPoint" :itemIndex="index" @getPointInfo="getPointInfo($event,index)" :key="index"/>
			</view>
		</view>		
	</view>
</template>

<script>
	import pointImg from '../pointImg/index.vue';
	import checkDamage from '../checkDamage/index.vue';
	import { getVehicleCheckIds } from '@/api/carPreFlight.js';
	export default {
		components:{
			pointImg,
			checkDamage
		},		
		computed:{
			pictureVOS(){
				const that = this 
				let pointList = this.$store.state.carPreFlight.formDetail.pictureVOS || []
				if(pointList.length){
					pointList.forEach((item,index)=>{
						console.log('frontList',that.frontList[Number(item.indexPic)])
						that.frontList[Number(item.indexPic)].pointList.push(item)
					})
				}			
				this.totalPoint = pointList
				console.log(this.frontList)
				// return pointList
			}
		},
		data(){
			return {
				totalPoint:[],
				pointInfo:[],
				frontList:[
					{
						unActiveImg:'/assets/1@2x.png',
						activeImag:'/assets/1.0@2x.png',
						pointList:[],
						width:350
					},{
						unActiveImg:'/assets/2@2x.png',
						activeImag:'/assets/2.0@2x.png',
						pointList:[],
						width:350
					},{
						unActiveImg:'/assets/3@2x.png',
						activeImag:'/assets/3.0@2x.png',
						pointList:[],
						width:175
					},{
						unActiveImg:'/assets/4@2x.png',
						activeImag:'/assets/4.0@2x.png',
						pointList:[],
						width:175
					},{
						unActiveImg:'/assets/5@2x.png',
						activeImag:'/assets/5.0@2x.png',
						pointList:[],
						width:175
					},{
						unActiveImg:'/assets/6@2x.png',
						activeImag:'/assets/6.0@2x.png',
						pointList:[],
						width:175
					},{
						unActiveImg:'/assets/7@2x.png',
						activeImag:'/assets/7.0@2x.png',
						pointList:[],
						width:350
					},{
						unActiveImg:'/assets/8@2x.png',
						activeImag:'/assets/8.0@2x.png',
						pointList:[],
						width:350
					}
				],
				beginIndex:0
			}
		},
		methods:{
			getPoint(arr,item){
				this.totalPoint = []
				item.pointList = arr
				this.beginIndex = this.frontList.reduce((prev,cur)=>{
					this.totalPoint = [...this.totalPoint,...cur.pointList]
					return prev + cur.pointList.length
				},0)
				console.log(this.totalPoint)
			},
			deletePoint(item){
				console.log(item)
			},
			// 获取标点信息
			getPointInfo(params,index){
				console.log(params,index)
				params.index = index
				if(this.pointInfo.length === 0){
					this.pointInfo.push(params)
					return 
				}
				this.pointInfo.forEach((item,index,arr)=>{
					if(item.index === params.index){
						item = params
					} else {
						const repeatArr = this.pointInfo.filter(item=>{
							return params.index === item.index
						})
						if(repeatArr.length === 0){
							arr.push(params)
						}
					}
				})
				console.log(this.pointInfo)
			},
			getPointArr(){
				let pointObj = {}
				let pointArr = [] 
				const pointInfo = this.pointInfo
				// pointObj.pointInfo = this.pointInfo
				this.frontList.forEach((item,index)=>{
					pointArr = [...pointArr,...item.pointList]			
				})	
				let pictureVOSArr = [] 	
				pointArr.forEach(item=>{					
					for(let key in pointInfo[item.indexPoint - 1]){
						item[key] = pointInfo[item.indexPoint - 1][key]
					}
					pictureVOSArr.push(item)
				})
				console.log('pointArr',pointArr)
				console.log('pictureVOSArr',pictureVOSArr)
				return pictureVOSArr
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.item-title{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 16rpx;
		font-size: 28rpx;		
	}
	.img-box{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap:wrap;
		
	}
</style>
